<template>
    <main-layout>
        <!-- 顶部搜索框及位置部分 -->
        <div class="topBox">
            <van-search
                v-model="searchValue"
                shape="round"
                placeholder="请输入关键词"
                @click.native="toSearchEvt"
            />
            <span class="messageIcon"></span>
        </div>

        <!-- 轮播图部分 -->
        <van-notice-bar
            left-icon="volume-o"
            text="美容预约平台为每一位用户持有良好的美容环境，期待大家的光临。"
        />
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="item in bannerList" :key="item.id">
                <img v-lazy="item.imageurl" />
            </van-swipe-item>
        </van-swipe>

        <!-- 导航菜单部分 -->
        <ul class="navBox">
            <li v-for="item in navList" :key="item.id">
                <img :src="item.imageurl">
                <span>{{item.imagetitle}}</span>
            </li>
        </ul>

        <!-- 精选推荐部分 -->
        <div class="commendProduct">
            <div class="selectMore">
                <h3>精选推荐</h3>
                <span>查看更多>>></span>
            </div>
            <div class="projectBox">
                <div class="productItem" @click="toProDetail(item.id)" v-for="item in projectList" :key="item.id">
                    <img :src="item.image.imageurl">
                    <span class="title">{{item.proname}}</span>
                    <div class="price">{{item.proprice}}</div>
                </div>
            </div>
        </div>

        <!-- 项目部分 -->
        <div class="allProject">
            <h3>各类新品</h3>
            <div class="listItem">
                <div class="projectCollection" @click="toProDeatils(item)" v-for="item in allProjectList" :key="item.id">
                    <div class="image">
                        <img :src="item.image.imageurl" alt="">
                    </div>
                    <div class="projectName">{{item.proname}}</div>
                    <div class="introduction">{{item.proexplain}}</div>
                    <div class="priceAndLike">
                        <span class="textPrice">{{item.proprice}}</span>
                        <span class="textLike">{{likeNum}}</span>
                    </div>
                </div>
            </div>

            <!-- 加载部分 -->
            <div class="toLoading">
                <div class="loading" v-if="loadingMore" @click="toMore">加载更多</div>
                <div class="loading" v-else-if="isShow">没有更多数据</div>
                <div class="loading" v-else>加载中...</div>
            </div>
        </div>
    </main-layout>
</template>

<script>
    import { getBannerApi, getNavApi, getProjectApi } from '../../axios/homeApi'
    export default {
        data() {
            return {
                //搜索部分
                searchValue:'',
                //相关图片初始路径
                ImgUrl:"http://120.79.136.98/Hairdressing/images/",
                //轮播图列表
                bannerList:[],
                //导航列表
                navList:[],
                //精选推荐
                projectObj:{
                    page:5,
                    size:4
                },
                projectList:[],
                // 项目部分对象
                allProjectObj:{
                    page:1,
                    size:4
                },
                allProjectList:[],
                likeNum:0,
                loadingMore:true,
                isShow:false
            }
        },

        async created() {
            //请求接口获取轮播图数据
            let bannerResult = await getBannerApi()
            if(bannerResult.code==0){
                this.bannerList=bannerResult.data
                for(let i=0;i<this.bannerList.length;i++){
                    this.bannerList[i].imageurl=this.ImgUrl+this.bannerList[i].imageurl
                }
            }

            //请求接口获取导航数据
            let navResult = await getNavApi()
            if(navResult.code==0){
                for(let i=0;i<navResult.data.length;i++){
                    navResult.data[i].imageurl=this.ImgUrl+navResult.data[i].imageurl
                    this.navList=navResult.data
                }
            }

            //精选推荐请求接口获取项目数据
            let projectResult = await getProjectApi(this.projectObj)
            if(projectResult.code==0){
                for(let i=0;i<projectResult.data.length;i++){
                    projectResult.data[i].image.imageurl=this.ImgUrl+projectResult.data[i].image.imageurl
                    this.projectList=projectResult.data
                }
            }

            //项目部分请求接口获取项目数据
            this.getToMoreProject()
        },

        methods: {
            //点击加载更多渲染列表数据
            toMore(){
                if (this.loadingMore) {
                    this.loadingMore = false
                    this.allProjectObj.page ++
                    this.getToMoreProject()
                }
            },

            //抽取调用项目别表方法
            async getToMoreProject(){
                let allProjectResult=await getProjectApi(this.allProjectObj)
                if(allProjectResult.code==0){
                    for(let i=0;i<allProjectResult.data.length;i++){
                        allProjectResult.data[i].image.imageurl=this.ImgUrl+allProjectResult.data[i].image.imageurl
                    }
                    this.allProjectList=[...this.allProjectList,...allProjectResult.data]
                }
                if(this.allProjectList.length>=allProjectResult.count){
                    this.isShow=true
                    this.loadingMore=false
                    return
                }
                setTimeout(() => {
                    this.loadingMore=true
                });
            },

            toProDetail(id){
                this.$router.push('/projectDetails?id='+id)
            },

            //点击进入项目详情页
            toProDeatils(it){
                this.$router.push('/projectDetails?id='+it.id)
            },

            //进入搜索页面
            toSearchEvt(){
                this.$router.push('/search')
            }
        },
    }
</script>

<style lang="less" scoped>
    // 顶部搜索框及位置部分
    .topBox{
        display: flex;
        background-color: #FCE1DA;
        align-items: center;
        > .van-search{
            flex: 0 0 350px;
            background: transparent;
        }
        > .messageIcon{
            display: block;
            height: 30px;
            width: 30px;
            background: url(../../images/message.png) center center / 100% 100% no-repeat;
        }
    }

    //轮播图部分样式
    .van-swipe,.van-swipe-item{
        width: 100%;
        height: 250px;
        > img{
            width: 100%;
            height: 100%;
        }
    }

    // 导航菜单部分样式
    .navBox{
        display: flex;
        height: 80px;
        justify-content: space-evenly;
        align-items: center;
        padding-top: 10px;
        background: #fff;
        margin-top: 5px;
        > li{
            width: 20%;
            height: 100%;
            text-align: center;
            > img{
                width: 40px;
                vertical-align: middle;
            }
            > span{
                display: block;
                color: #111;
                font-weight: bold;
                font-size: 18px;
            }
        }
    }

    //精选推荐部分
    .commendProduct{
        background-color: #fff;
        margin-top: 20px;
        padding-top: 10px;
        .selectMore{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 10px;
            height: 25px;
            > h3{
                display: block;
                letter-spacing: 5px;
            }
            > span{
                color: #d1d1d1;
                font-size: 0.8rem;
                letter-spacing: 1px;
            }
        }
        .projectBox{
            display: flex;
            .productItem{
                width: 20%;
                margin: 0 auto 15px;
                padding: 8px 6px 0;
                > img{
                    width: 100%;
                    height: 100px;
                }
                > .title{
                    display: block;
                    font-size: 1rem;
                    font-weight: bold;
                    margin: 0 0 10px 5px;
                    width: 97%;
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                }
                .price{
                    color: #E60012;
                    font-size: 0.9rem;
                    font-weight: bold;
                    text-align: center;
                    &::before{
                        content: '￥';
                        font-size: 0.6rem;
                    }
                }
            }
        }
    }

    //项目部分
    .allProject{
        background: #fff;
        overflow-x: scroll;
        // height: 50%;
        > h3{
            display: block;
            letter-spacing: 5px;
            padding: 13px 10px 0;
        }
        .listItem{
            width: 100%;
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            .projectCollection{
                width: 47%;
                margin-bottom: 30px;
                box-shadow: 4px 4px 3px #a1a1a1;
                > .image{
                    width: 100%;
                    height: 50%;
                    > img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .projectName{
                    font-size: 1.1rem;
                    letter-spacing: 1px;
                    margin: 10px 0 10px 10px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .introduction{
                    width: 95%;
                    font-size: 0.9rem;
                    letter-spacing: 0.5px;
                    margin: 0 0 15px 12px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .priceAndLike{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .textPrice{
                        margin-left: 12px;
                        color: #F60F0B;
                        font-size: 1.3rem;
                        &::before{
                            content: '￥';
                            font-size: 0.9rem;
                        }
                    }
                    .textLike{
                        margin-right: 11px;
                        font-size: 0.95rem;
                        color: #C7C7C7;
                        &::before{
                            content: url(../../images/like.png);
                        }
                    }
                }
            }
        }
        //加载部分
        > .toLoading{
            padding: 5px 0;
            > .loading{
                color: #c9c9c9;
                text-align: center;
                letter-spacing: 1px;
            }
        }
    }
</style>